const {
    resolve
} = require('path'); //path模块是Node内置的
//__dirname:当前配置文件所在的目录绝对路径
//resolve:用来拼接路径的函数

const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导入ESLint插件
const ESLintPlugin = require('eslint-webpack-plugin');
//导入css单独打包插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 1. 引入压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//引入压缩js插件
const TerserPlugin = require("terser-webpack-plugin");
//暴露配置对象
module.exports = {
    //入口
    entry: './src/main.js',
    //出口
    output: {
        path: resolve(__dirname, '../build'), //打包文件所在的根目录
        // filename: 'js/bundle.js', //打包生成的js文件名(可以带目录)
        //配置对JS文件名也做hash化处理
        // filename: 'js/[name]_[hash:8].js',  // hash: 根据所有模块整体内容来生hash值
    filename: 'js/[name]_[contenthash:8].js', // contenthash: 根据打包文件内容来生成hash值
        clean: true, //打包时,会先自动请空打包文件夹
        // 设置引入打包文件的基础路径，默认是相对路径（现在没问题，后期有问题）
        publicPath: '/'
    },
    //模式  
    mode: 'production',
    module: {
        rules: [
            //配置css文件处理
            {
                test: /\.css$/, //处理css文件
                use: [
                    // "style-loader", //将css生成style 标签插入HTML中
                    // 2. 将style-loader换为MiniCssExtractPlugin.loader
                    MiniCssExtractPlugin.loader,
                    "css-loader", //将css转为CommonJs
                    'postcss-loader', // 添加在css-loader下面
                ]
            },
            {
                test: /\.less$/, //处理less文件
                use: [
                    // "style-loader", //将css生成style 标签插入HTML中
                    MiniCssExtractPlugin.loader,
                    "css-loader", //将css转为CommonJs
                    'postcss-loader', // 添加在css-loader下面
                    'less-loader' //将less编译为css   webpack从下往上执行
                ]
            },
            //配置 babel 的 loader
            {
                test: /\.js$/,
                exclude: /(node_modules)/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        // presets: ['@babel/preset-env'], // 指定bebel预设包
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: {
                                        version: 2
                                    } // 指定core-js的版本号为2
                                }
                            ]
                        ],
                        plugins: [], // 指定babel插件包
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                // 打包生成的文件
                generator: {
                    filename: 'images/[name]_[hash:8][ext]',
                },
            },
            // 打包字体图标
            {
                test: /\.(woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'font/[name]_[hash:8][ext]',
                },
            },

        ]
    },
    plugins: [
        // eslint插件
        new ESLintPlugin(),

        // 2. 配置打包HTML的插件
        new HtmlWebpackPlugin({
            template: "./public/index.html", // 指定html模板文件。
            inject: "body", // 将打包生成的JS文件放置在body尾部
        }),
        // 3. 配置单独生成css的插件
        new MiniCssExtractPlugin({
            filename: "css/[name]_[hash:8].css",
        }),
    ],
    // 优化配置
    optimization: {
        minimizer: [
            // 2. 在优化配置中指定插件来压缩CSS
            new CssMinimizerPlugin(),
            // 2. 在优化配置项中指定插件压缩JS
            new TerserPlugin()
        ],
    },
}